/* 共同样式 */
            /* 头部 */
            .header{
                width: 100%;
                height: 100px;
                background-color: #fff;
            }
            .header-c{
                width: 1200px;
                height: 100%;
                /* background-color: pink; */
                margin: 0 auto;
            }
            .header .logo{
                float: left;
                width: 221px;
                margin-top: 24px;
            }
            .header .nav{
                float: right;
            }
            .header .nav .item{
                float: left;
                /* 设计稿28px 这里40px 是因为要做hover效果 这样处理可以在鼠标 悬浮时 其他的 元素不受影响 */
                /* 把字体放大后的样子 计算一下  得到数值 */
                width: 40px;
                height: 100px;
                line-height: 100px;
                /* 设计稿82px  但是设置了40px的宽 所以要适当缩小 间距 */
                margin-left: 70px;
                text-align: center;
                transition: 0.2s;
            }
            /* 因为每个页面的 导航部分 高亮不一样 所以加一个active 来区分他们 便于操作 */
            .header .nav .active a{
                font-size: 18px;
                color: #668aca;
            }
            .header .nav .active::after{
                opacity: 1;
            }
            .header .item:hover a{
                font-size: 18px;
                color: #668aca;
            }
            .header .item::after{
                content: '';
                display: block;
                width: 20px;
                height: 1px;
                background-color: #668aca;
                margin: 0 auto;
                /* 这个下划线距离 有点小饶 */
                margin-top: -35px;
                opacity: 0;
                transition: 0.2s;
            }
            .header .item:hover::after{
                opacity: 1;
                height: 2px;
            }
            /* 脚部 */
            .footer{
                width: 100%;
                height: 262px;
                background-color: #f7f7f7;
            }
            .footer .footer-c{
                width: 1200px;
                height: 100%;
                background-color: #f7f7f7;
                margin: 0 auto;

                /* 把版心转为怪异盒子 */
                box-sizing: border-box;
                padding-top: 98px;
            }
            .footer .col{
                float: left;
            }
            .footer .col-1{
                width: 385px;
                height: 74px;
                text-align: center;
                /* background-color: aquamarine; */
            }
            .footer .col .dizhi{
                font-size: 16px;
                margin-bottom: 10px;
            }
            .footer .col .icon{
                margin: 0 auto;
            }
            .footer .col-2{
                width: 435px;
                height: 74px;
                /* background-color: aqua; */
                border-left: 1px solid #e9e9e9;
                box-sizing: border-box;
                padding-left: 61px;
            }
            .footer .col-3{
                width: 380px;
                height: 74px;
                /* background-color: orange; */
                border-left: 1px solid #e9e9e9;
                box-sizing: border-box;
                padding-left: 61px;
            }
            .footer .col .text{
                /* margin: 0 auto; */
                height: 14px;
                line-height: 14px;
                margin-bottom: 16px;
            }